<template>
	<view class="nav_bar">
		<view class="nav_bar_top">
			<!-- 处理 app 以及小程序的导航栏 -->
			<view :style="{ height: statusBarHeight + 'rpx' }"></view>
			<view @click="goSearchPage" class="nav_bar_content" :style="{ marginRight: marginRight + 'rpx' }">
				<uni-icons type="search" color="#999"></uni-icons>
				<view class="nav_bar_search-text">
					输入文章标题进行搜索
				</view>
			</view>
		</view>
		<!-- 底部的垫片 -->
		<view :style="{ height: statusBarHeight + 80 + 'rpx' }"></view>
	</view>
</template>

<script>
	export default {
		name:"NavBar",
		data() {
			return {
				statusBarHeight: 20,
				marginRight: ''
			};
		},
		created() {
			this.getSystemInfo()
		},
		methods: {
			// 获取小程序头部高度或者是右边悬浮按钮的位置
			getSystemInfo() {
				const systemInfo = uni.getSystemInfoSync()
				systemInfo.statusBarHeight && (this.statusBarHeight = systemInfo.statusBarHeight * 2)
				// #ifdef MP-WEIXIN
				const menuInfo = uni.getMenuButtonBoundingClientRect()
				this.statusBarHeight = menuInfo.top * 2
				this.marginRight = menuInfo.width * 2
				// #endif
			},
			// 跳转到搜索界面
			goSearchPage() {
				uni.navigateTo({
					url:'/pages/search/search'
				})
			}
		} 
	}
</script>

<style lang="scss">
@import 'css/NavBar.scss'
</style>